Compose Modifier修饰符详细解说 |
您所在的位置：网站首页 › flutter tabview 高度 › Compose Modifier修饰符详细解说 |
|
本文会对Modifier修饰符进行详尽的解说，报你收货满满 本文git地址： https://github.com/ymeddmn/ModifierIntroduce ModifierModifier 可以被翻译为修饰符，可以用来修饰以下内容： 更改可组合项的大小、布局、行为和外观 添加信息，如无障碍标签 处理用户输入 添加高级互动，如使元素可点击、可滚动、可拖动或可缩放 item 代码案例第三节属性扩展中的案例都是基于本节中 item 方法的形参进行赋值得到的 item1 item1 代码 @Composable fun item1(m: Modifier) { Column( modifier = Modifier.fillMaxSize(1f), horizontalAlignment = Alignment.CenterHorizontally ) { Box( modifier = m .size(100.dp) .background(color = Color.Red), contentAlignment = Alignment.Center ) { Text( text = "安安安安卓", textAlign = TextAlign.Center, style = TextStyle(color = Color.White) ) } Spacer(modifier = Modifier.height(10.dp)) } } item 默认的展示效果如下： Modifier 所有扩展方法详解 selectable（compose 实现单选）这里起初我是没头绪的，就拼了命的百度找资料的，但是说实话一篇讲这里的文章都没有。所以只能去官网翻译官方文档了。基本上花了半小时才搞明白啥意思。眼睛又废了，本周计划的 Livedata 源码也讲不了了 总的来说 selectable 就是用来实现单选的，可作为 RadioGroup 使用，也可作为 TabView 使用。 代码 val icons = listOf( Triple(R.drawable.apple, R.drawable.lufeicry, "海贼王"), Triple(R.drawable.nameismile, R.drawable.nameicry, "娜美"), Triple(R.drawable.luobinsmile, R.drawable.luobincry, "罗宾") ) var selectedItem = remember { mutableStateOf(icons[0]) } Column( modifier = Modifier.fillMaxSize(1f), verticalArrangement = Arrangement.Center, horizontalAlignment = Alignment.CenterHorizontally ) { Row { Text( text = "公众号：\"安安安安卓\"，选择:", style = TextStyle( color = Color.Black, fontSize = 15.sp ), modifier = Modifier.weight(0.7f) ) Text( text = selectedItem.value.third, style = TextStyle(color = Color.Red, fontSize = 25.sp), modifier = Modifier.weight(0.3f) ) } Row( // modifier = Modifier // .selectableGroup(), horizontalArrangement = Arrangement.SpaceAround ) { icons.forEach { val selected = selectedItem.value == it Image( painter = painterResource(id = if (selected) it.first else it.second), contentDescription = null, modifier = Modifier .selectable( selected = selected, enabled = true, role = null, onClick = { selectedItem.value = it }) .size(100.dp) ) } } } 效果 fillMaxSize 代码 item1(m = Modifier.background(color = Color.Blue).fillMaxSize(0.75f)) 效果设置属性后填充了父容器 0.75 倍的大小 height 代码 item1(m = Modifier.background(color = Color.Blue).height(30.dp)) 效果设置高度为 30 后，宽度也跟随进行了改变 width同 height size代码 item1(m = Modifier.background(color = Color.Blue).size(30.dp)) 效果图 宽高都变为了 30dp background 简单使用 background 设置背景色item1(m = Modifier.background(color = Color.Red)) 实现圆形背景 代码 item1(m = Modifier.background(color = Color.Red,shape = CircleShape)) 效果 实现圆角背景 代码 item1(m = Modifier.background(color = Color.Red,shape = RoundedCornerShape(10.dp)))2.效果 实现渐变效果 代码 item1(m = Modifier.background(brush = Brush.linearGradient(mutableListOf(Color.Red,Color.Green,Color.Yellow,Color.Gray)))) 效果默认的线性渐变效果是从左上到右下的 verticalScroll加上它 Column 就可以垂直方向进行滚动了 代码 Column( modifier = Modifier .verticalScroll(rememberScrollState()) .fillMaxSize(1f) ) padding、border 代码 item1( m = Modifier .background(color = Color.Red,shape = CircleShape) .padding(4.dp) .border(border = BorderStroke(2.dp, color = Color.Green),shape = CircleShape) )效果 本例实现了这样一个效果，先添加圆形背景，再添加 padding，最后添加圆形 border clip注意 background 方法和 clip 方法不能同时使用，否则 background 会覆盖 clip 的效果 代码 Box(modifier = Modifier.clip(CircleShape)) { Box(Modifier.size(200.dp).background(color = Color.Green)) } 效果 clipToBounds暂无 offset根据文档中的描述，offset 可以对控件内部元素的内容进行偏移，比如： 如果内部元素是 LTR，则 x 正值向右，负值向左 如果内部元素是 RTL，则 x 正值向左，负值向右 代码 item1(m = Modifier.background(color = Color.Red).offset(x=30.dp)) 效果 absoluteOffset与 offset 类似，不过不会考虑布局方向。 正值向右或下，负值向左或上 absolutePadding暂无 alpha设置透明度 代码 item1(m = Modifier.background(color = Color.Red).alpha(0.3f)) 效果 clickable让任意控件变的可点击，并且会附加水波纹效果 代码 item1(m = Modifier.background(color = Color.Red).clickable(onClick = { Log.e(“tag”,“安安安安卓”) })) 效果 打印日志 E/tag: 安安安安卓 E/tag: 安安安安卓 E/tag: 安安安安卓 E/tag: 安安安安卓 defaultMinSize可以设置控件的最小尺寸 代码 item1(m = Modifier.background(color = Color.Red).defaultMinSize(300.dp)) 效果item1 中控件的宽度是 100dp，我们将最小控件尺寸设置为 300dp，然后控件宽度自动的变为了 300dp，说明最小尺寸生效了。 draggable暂无 drawBehind暂无 drawWithCache暂无 drawWithContent暂无 heightIn设置最小高度 horizontalScroll使我们的空间可以水平滑动，我们代码中用的 Text 做 demo，结果 Text 变成了单行可滑动 代码 Text( text = "公众号，安安安安卓，是一个用来分享安卓知识的公众号，ad发法撒扥a懂法A栋发扥as扥", modifier = Modifier .horizontalScroll(enabled = true, state = ScrollState(12)) .height(100.dp) .background(color = Color.Green), textAlign = TextAlign.Center ) 效果 indication暂无 layout暂无 layoutId给控件设置 id 使用ConstraintLayout的时候会有用 代码 item1(m = Modifier.background(color = Color.Red).layoutId("name")) nestedScroll暂无 onFocusChanged暂无 onFocusEvent暂无 onGlobalPositioned暂无 onKeyEvent暂无 onPreviewKeyEvent暂无 onSizeChanged暂无 paddingFrom暂无 PaddingFromBaseLine暂无 paint暂无 pointInput暂无 requireHeight代码 效果 requireHeightIn重新设置最小高度， 代码 item1(m = Modifier.background(color = Color.Red).requiredHeight(height = 20.dp)) 效果蓝框中的高度是调用了 requireHeightIn 方法的效果 框外的是正常的控件高度 requireSize同：requireHeightIn requireWidth同：requireHeightIn requireWidthIn同：requireHeightIn scale对控件里面的内容进行缩放 代码 item1(m = Modifier.background(color = Color.Red).scale(2f)) 效果 shadow阴影效果 代码 item1( m = Modifier .background(color = Color.Red) .shadow(elevation = 3.dp, shape = RectangleShape,clip = true)//不知道是否是我用的不对，效果非常不好看 ) 效果感觉效果好丑，肯定是我用错了 sizeIn最小尺寸 swipeable暂无 toggleable非常适合用来做开关效果，本例我们用自己找到的两张图模拟点击切换状态 代码 val selected = remember { mutableStateOf(true) } Image( painter = painterResource(id = if (selected.value) R.drawable.apple else R.drawable.luobinsmile), contentDescription = null, modifier = Modifier .toggleable( value = selected.value, enabled = true, role = null, onValueChange = { selected.value = it }) .size(100.dp) ) 效果 transformable暂无 withIn可以设置最小尺寸和最大尺寸 代码item1(m = Modifier.background(color = Color.Red).widthIn(min = 50.dp,max = 200.dp)) wrapContentHeight暂无 wrapContentWidth暂无 wrapContentSize暂无 zIndexzIndex 用来设置控件的层级，zIndex 值较大的会覆盖在 zIndex 值较小的控件上方。如果两个控件 zIndex 一样大，那么会按照他们的代码中的顺序摆放 代码 本例代码，我们创建了两个 Text， 第一个红色 zIndex=5 第二个绿色 zIndex=4 按我们的预期红色的会处于绿色的控件的顶部 Box { Text( text = "安安安安卓2", modifier = Modifier .size(100.dp) .background(color = Color.Red) .zIndex(5f) ) Text( text = "安安安安卓1", modifier = Modifier .size(150.dp) .background(color = Color.Green) .zIndex(4f) ) } 效果最终效果与我们预期的一致 关注公众号学习更多知识 |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |